<template>
  <div class="goodsListFooter">
    <ul class="twoSelect">
      <li class="type" @click="isTypeShow">
        商品分类
        <ul v-show="isShow" class="childSelect">
          <li class="childSelectItem" v-for="data in childSelect" :key="data.id">{{data.name}}</li>
        </ul>
      </li>|
      <li class="story" >
        <router-link to="/brandStory">品牌故事</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "goodsListFooter",
  data() {
    return {
      isShow: false,
      childSelect:[
        {name:"篮球鞋"},
        {name:"卫衣"},
        {name:"羽绒棉服"},
        {name:"长裤"},
        {name:"夹克"},
        {name:"跑步鞋"}
      ]
    };
  },
  methods: {
    isTypeShow() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsListFooter {
  width: 100%;
  height: 47px;
  background-color: white;
  position: fixed;
  left: 0;
  bottom: 0;
  .twoSelect {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 47px;
    color: #dbd9d9;
    border-top: 1px solid #dbd9d9;
    .type {
      width: 48%;
      height: 47px;
      line-height: 47px;
      text-align: center;
      color: #666;
      font-size: 16px;
      .childSelect {
        position: absolute;
        bottom: 47px;
        background: rgba(255, 255, 255, 0.9);
        border-top: 1px solid #ebebeb;
        width: 49%;
        .childSelectItem {
          width: 90%;
          margin: 0 auto;
          height: 44px;
          line-height: 44px;
          text-align: center;
          font-family: PingFang-SC-Regular;
          font-size: 16px;
          color: #666;
          letter-spacing: 0;
          border-bottom: 1px solid #ebebeb;
        }
      }
    }
    .story {
      width: 48%;
      height: 47px;
      line-height: 47px;
      text-align: center;
      color: #666;
      font-size: 16px;
    }
  }
}
</style>